import {
  Button,
  Col,
  Form,
  FormItem,
  InputNumber,
  message,
  Modal,
  Row,
  Spin
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { jindouGiftApi, orderApi } from '@/apis'
import { OrderDetailItem } from '@/apis/orderTypes'
import { formatDate } from '@/utils'
import { handlePrice } from '@/utils/bsshow'

import { brandIdMap, orderStatusMap, orderThirdStatusMap } from '../constants'

export default defineComponent({
  name: 'DcOrderDetailManage',
  setup() {
    const route = useRoute()
    const data = ref([] as any[])
    const orderNo = ref(route.query.orderNo)
    const brandId = ref(route.query.brandId as any)
    const restaurantName = ref(route.query.restaurantName)
    const thirdStatus = ref(route.query.thirdStatus as any)
    const status = ref(route.query.status as any)
    const wxNickName = ref(route.query.wxNickName)
    const phone = ref(route.query.phone)
    const createTime = ref(route.query.createTime as any)
    const payTime = ref(route.query.payTime as any)
    const refundTime = ref(route.query.refundTime as any)
    const code = ref(route.query.code)
    const payMoneyText = ref(route.query.payMoneyText)

    const optionItemCur = ref({} as OrderDetailItem)
    const loading = ref(false)

    const showRefundDlg = ref(false)
    const refundDlgLoading = ref(false)

    onMounted(() => {
      orderDetail()
    })

    async function orderDetail() {
      try {
        loading.value = true
        data.value = await orderApi.getOrderDetail(route.query.id)
      } finally {
        loading.value = false
      }
    }

    //售后
    function afterSales(item: OrderDetailItem) {
      optionItemCur.value = item
      showRefundDlg.value = true
    }

    async function afterSalesConfirm() {
      if (!optionItemCur.value.refundprice && !optionItemCur.value.refundgold) {
        message.error('请输入')
        return
      }
      try {
        refundDlgLoading.value = true
        await orderApi.partOrderRefund(
          optionItemCur.value.orderNo,
          optionItemCur.value.slogan,
          optionItemCur.value.refundgold,
          optionItemCur.value.refundprice
        )
        showRefundDlg.value = false
        message.success('操作完成')
        orderDetail()
      } finally {
        refundDlgLoading.value = false
      }
    }

    return {
      data,
      orderNo,
      brandId,
      restaurantName,
      thirdStatus,
      status,
      wxNickName,
      phone,
      createTime,
      payTime,
      refundTime,
      code,
      payMoneyText,
      showRefundDlg,
      refundDlgLoading,
      loading,
      optionItemCur,
      afterSales,
      afterSalesConfirm
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <FormItem>
            <h3>订单详情</h3>
          </FormItem>

          <h4>基本信息</h4>
          <Row type="flex" style={{ marginTop: '10px', marginLeft: '30px' }}>
            <Col span={5}>
              <FormItem label="订单编号：">{this.orderNo}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="实付金额：">{this.payMoneyText}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="商品供应商：">
                {brandIdMap[this.brandId]}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="商品所属门店：">{this.restaurantName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="第三方状态：">
                {this.thirdStatus ? orderThirdStatusMap[this.thirdStatus] : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="我方状态：">
                {orderStatusMap[this.status]}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单人：">{this.wxNickName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单手机号：">{this.phone}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单时间：">
                {this.createTime
                  ? formatDate(new Date(parseInt(this.createTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="支付时间：">
                {this.payTime
                  ? formatDate(new Date(parseInt(this.payTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={5} v-show={this.status == 4}>
              <FormItem label="发起售后时间：">
                {this.refundTime
                  ? formatDate(new Date(parseInt(this.refundTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="取餐码：">{this.code ? this.code : ''}</FormItem>
            </Col>
          </Row>

          <h4>商品信息</h4>
          {this.data.map(item => (
            <Row
              type="flex"
              style={{ marginTop: '10px', marginLeft: '30px' }}
              align="top"
            >
              <Col span={5}>
                <FormItem label="商品名称">{item.productName}</FormItem>
              </Col>
              <Col span={3}>
                <FormItem label="商品数量">{item.amount}</FormItem>
              </Col>
              <Col span={4}>
                <FormItem label="商品售价">
                  {handlePrice(item.price, item.goldBean)}
                </FormItem>
              </Col>
              <Col span={3}>
                <FormItem label="实付金额">
                  {handlePrice(item.realPrice, item.realGold)}
                </FormItem>
              </Col>
              <Col span={3}>
                {item.hasRefundPrice || item.hasRefundGold ? (
                  <FormItem label="(已退)">
                    {handlePrice(item.hasRefundPrice, item.hasRefundGold)}
                  </FormItem>
                ) : (
                  ''
                )}
              </Col>
              <Col span={3} v-show={item.isAfterSale}>
                <FormItem>
                  <Button
                    type="link"
                    onClick={() => {
                      this.afterSales(item)
                    }}
                  >
                    售后
                  </Button>
                </FormItem>
              </Col>
            </Row>
          ))}
        </Form>
        <Modal
          v-model:visible={this.showRefundDlg}
          confirmLoading={this.refundDlgLoading}
          title="售后金额"
          width={500}
          destroyOnClose
          onOk={this.afterSalesConfirm}
        >
          <Form>
            <FormItem label={'现金部分'} required>
              <InputNumber
                v-model:value={this.optionItemCur.refundprice}
                placeholder="请输入"
                min={0}
                max={this.optionItemCur.price}
                style={{ width: '300px' }}
              />
            </FormItem>
            <FormItem label={'金豆部分'} required>
              <InputNumber
                v-model:value={this.optionItemCur.refundgold}
                placeholder="请输入"
                min={0}
                max={this.optionItemCur.goldBean}
                style={{ width: '300px' }}
              />
            </FormItem>
          </Form>
        </Modal>
      </Spin>
    )
  }
})
